﻿@{
    ViewBag.ParentUrl = "/Menu/Index";
    ViewBag.Title = "菜单管理";
}
@section breadcrumb
{
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="/">控制台</a>
        </li>
        <li class="active">@ViewBag.Title</li>
    </ul><!-- .breadcrumb -->
}
<div class="row">
    <div class="col-xs-12">
        <div class="widget-box widget-color-blue2">
            <div class="widget-header">
                <h4 class="widget-title lighter smaller">菜单/功能</h4>
            </div>

            <div class="widget-body">
                <div class="widget-toolbox">
                    <div class="btn-toolbar">
                        <div class="btn-group">
                            <button class="btn btn-sm btn-success btn-white btn-round" id="btnAdd">
                                <i class="ace-icon fa fa-plus bigger-110 green"></i>
                                添加
                            </button>
                            <button class="btn btn-sm btn-info btn-white btn-round" id="btnEdit">
                                <i class="ace-icon fa fa-edit bigger-110 red2"></i>
                                编辑
                            </button>
                            <button class="btn btn-sm btn-danger btn-white btn-round" id="btnDelete">
                                <i class="ace-icon fa fa-times bigger-110 red2"></i>
                                删除
                            </button>
                        </div>

                    </div>
                </div>
                <div class="widget-main padding-8">
                    <div id="tree1" class="tree"></div>
                </div>
            </div>
        </div>
        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->
<div class="modal fade" id="menuModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">角色菜单</h4>
            </div>
            <form class="form-horizontal" role="form" id="frmMenu" method="POST" novalidate="novalidate" action="/Menu/Edit">
                <div class="modal-body">
                    <!-- #section:elements.form -->
                    <input id="A_Id" name="A_Id" value="" type="hidden" />
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right"> 类别 </label>
                        <div class="col-sm-9">
                            <label>
                                <input name="A_Flag" type="radio" class="ace" value="0" required checked>
                                <span class="lbl"> 功能</span>
                            </label>
                            <label>
                                <input name="A_Flag" type="radio" class="ace" value="1" required>
                                <span class="lbl"> 菜单</span>
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="A_PId"> 父节点Id</label>
                        <div class="col-sm-9">
                            <input type="number" id="A_PId" name="A_PId" placeholder="如果为0表示顶级目录" class="col-xs-10 col-sm-8" required min="0" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="A_Controller"> Controller</label>
                        <div class="col-sm-9">
                            <input type="text" id="A_Controller" name="A_Controller" placeholder="控制器名" class="col-xs-10 col-sm-8" data-max="20" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="A_Action"> Action</label>
                        <div class="col-sm-9">
                            <input type="text" id="A_Action" name="A_Action" placeholder="方法名" class="col-xs-10 col-sm-8" data-max="20" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="A_Title"> 描述名</label>
                        <div class="col-sm-9">
                            <input type="text" id="A_Title" name="A_Title" placeholder="菜单中文名" class="col-xs-10 col-sm-8" required data-max="20" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="A_Icon"> 图标</label>
                        <div class="col-sm-9">
                            <input type="text" id="A_Icon" name="A_Icon" placeholder="如：fa-times" class="col-xs-10 col-sm-8" data-max="20" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="A_Rank"> 排序</label>
                        <div class="col-sm-9">
                            <input type="number" id="A_Rank" name="A_Rank" placeholder="菜单排序顺序" class="col-xs-10 col-sm-8" required min="0" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="A_Memo"> 备注</label>
                        <div class="col-sm-9">
                            <textarea class="col-xs-10 col-sm-8" id="A_Memo" name="A_Memo" placeholder="菜单备注"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right"> 状态 </label>
                        <div class="col-sm-9">
                            <label>
                                <input name="A_State" type="radio" class="ace" value="0" required checked>
                                <span class="lbl"> 正常</span>
                            </label>
                            <label>
                                <input name="A_State" type="radio" class="ace" value="1" required>
                                <span class="lbl"> 冻结</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="btnSave">保存</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@section footerScript{
    <script src="~/assets/js/uncompressed/fuelux/fuelux.tree.js"></script>
}
@section footer{
    <script src="/assets/js/bootbox.min.js"></script>
    <script src="/assets/js/validation/jquery-html5Validate.js"></script>
    <script>
        //加载验证
        $.testRemind.css = {
            zIndex: 9999
        };
        $("#frmMenu").html5Validate(function() {
            this.submit();
        }, {
        
        });

        //加载tree
        var DataSourceTree = function(options) {
            this._data = options.data;
            this._delay = options.delay;
        }
        DataSourceTree.prototype.data = function(options, callback) {
            var self = this;
            var $data = null;

            if (!("name" in options) && !("type" in options)) {
                $data = this._data; //the root tree
                callback({ data: $data });
                return;
            } else if ("type" in options && options.type == "folder") {
                if ("additionalParameters" in options && "children" in options.additionalParameters)
                    $data = options.additionalParameters.children;
                else $data = {} //no data
            }

            if ($data != null) //this setTimeout is only for mimicking some random delay
                setTimeout(function() { callback({ data: $data }); }, parseInt(Math.random() * 500) + 200);

            //we have used static data here
            //but you can retrieve your data dynamically from a server using ajax call
            //checkout examples/treeview.html and examples/treeview.js for more info
        };

        var data1 = @Html.Raw(ViewBag.MenuStr);
        console.log(JSON.stringify(data1));
        var treeDataSource = new DataSourceTree({ data: data1 });
        //////////////
        $(function() {
            var tr = $('#tree1').ace_tree({
                dataSource: treeDataSource,
                loadingHTML: '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
                'open-icon': 'ace-icon tree-minus',
                'close-icon': 'ace-icon tree-plus',
                'selectable': true,
                'selected-icon': null,
                'unselected-icon': null
            });
            var selectedId = -1;
            //绑定treeview选中事件
            $("#tree1").on('selected', function(e, i) {
                //console.log(e);
                // console.log(i);
                selectedId = i.info[0].id;
                console.log(selectedId);
            });

            //删除
            $('#btnDelete').on('click', function() {
                if (selectedId > -1) {
                    $.post('/Menu/Forzen', { id:selectedId }, function(o) {
                        //alert(o.Msg);
                        if (o.State == 0) {
                            bootbox.alert("操作成功！", function() {
                                //window.location.reload();
                                location.reload();
                            });
                        } else {
                            var tips = o.Message || '操作有误！';
                            bootbox.alert(tips);
                        }
                    }); 
                } else { 
                    bootbox.alert("请选择您要编辑的菜单！");
                    return;
                }
            });
            //添加菜单
            $('#btnAdd').on('click', function() {
                $("#frmMenu")[0].reset();
                if (selectedId > -1) { //添加子菜单
                    $('#A_PId').val(selectedId);
                }
                $("#menuModal").modal("show");
            });

            //编辑菜单
            $('#btnEdit').on('click', function() {
                if (selectedId > -1) {
                    $("#frmMenu")[0].reset();
                    $.post('/Menu/QueryMenyById', { id: selectedId }, function(o) {
                        if (o !== 'error' && o.State != 1) {
                            for (prop in o) {
                                $('#' + prop).val(o[prop]);
                                console.log($('#' + prop));
                                console.log($('#' + prop).val());
                                $("input[name='" + prop + "'][value=" + o[prop] + "]").prop("checked", true);

                            }
                            $("#menuModal").modal("show");
                        } else {
                            var tips = o.Message || '未授权操作';
                            bootbox.alert(tips);
                        }

                    });
                } else {
                    bootbox.alert("请选择您要编辑的菜单！");
                    return;
                }
            });

        });
    </script>
}
